<template>
<!--  用户评论 -->
<div>
<div class="comment border-bottom">
<h3><span class="hu">|</span>用户评论</h3>
<div class="comment-list">
<div class="mp-comment-item">
<img src="//s.qunarzz.com/piao/image/touch/sight/highQualityComment1.png" />
<div class="comment-stardate">
<div class="mpf-starlevel">
  <span class="iconfont starlevel-gain">&#xe846;&#xe846;&#xe846;&#xe846;&#xe846;&nbsp;&nbsp;</span>
</div>
<span class="comment-date">随*啊 &nbsp;&nbsp;2017-12-30</span>
</div>
<p class="comment-content">
参观故宫是来京必须要安排的行程，紫禁城的宏伟和惊艳超乎你想象，
假装自己穿越时空，你走在乾隆皇帝走过的石板砖上，
体验当年盛世的文化底蕴和奢华的生活～ 攻略1 提前网上购买门票，
凭身份证直接进 攻略2 租讲解器，每个讲解器都是感应的，每个只讲解一遍，
只有一个耳机，别想着两人共用的好事儿，哈哈哈 攻略3 周一闭馆，周末人居多，
尽量安排工作日，若所有宫殿都想参观，就提早进去，不过我个人觉得没必要，
参观代表性的中轴和个别妃子和慈禧的宫殿即可，建议预留至少大半天时间在里头
再来北京，还愿意去故宫~~
</p>
<div class="comment-foldbtn">
<span class="iconfont">&#xe6cd;</span>
</div>
</div>
</div>
</div>
<div class="comment border-bottom">
<div class="comment-list">
<div class="mp-comment-item">
<div class="comment-stardate">
<div class="mpf-starlevel">
<span class="iconfont starlevel-gain">&#xe846;&#xe846;&#xe846;&#xe846;&#xe846;&nbsp;&nbsp;</span>
</div>
<span class="comment-date">o*6&nbsp;&nbsp;2019-07-14</span>
</div>
<p class="comment-content">
我们是早上8:30的第一场，有珍宝馆的套票，王蕾导游讲解很到位，
妙语连珠，互动性强，服务热情，路线和讲解安排合理，游玩很开心有意义，
对故宫有了深入全面的了解，不虚此行，不留遗憾，深有体会，故宫博物院完美打卡。
</p>
</div>
</div>
</div>
<div class="comment-npl-list">
<ul>
<li @click="handleGallery">
<img src="http://img1.qunarzz.com/piao/fusion/1907/3c/d4bc8059befcb802.jpg_228x168_9948950b.jpg">
</li>
<li>
<img src="http://img1.qunarzz.com/piao/fusion/1907/fc/f7bb7091387ebd02.jpg_228x168_ffdc3bc2.jpg">
</li>
<li>
<img src="http://img1.qunarzz.com/piao/fusion/1907/77/0e7c58a9b4ee5802.jpg_228x168_9fc40d99.jpg" />
</li>
<li>
<img src="http://img1.qunarzz.com/piao/fusion/1907/b1/6a445d67b0914602.jpg_228x168_d10debb3.jpg" />
</li>
<li>
<img src="http://img1.qunarzz.com/piao/fusion/1907/f5/6237ad15bad1d702.jpg_228x168_5eb57b70.jpg" />
</li>
<li>
<img src="http://img1.qunarzz.com/piao/fusion/1907/41/60b5591dbd037902.jpg_228x168_93626e0e.jpg" />
</li>
</ul>
<div class="mp-comment-imgnumtag">
<span class="commenttag-bg"></span>
<span class="comment-tagnum">共9张</span>
</div>
<div class="mp-more-refresh">
查看全部评论<span class="iconfont">&#xe600;</span>
</div>
</div>
<gallery-two v-show="isShow" @hide-gall="hangleHide" :gallery="gallery"></gallery-two>
</div>
</template>

<script>
import GalleryTwo from '@/components/galleryTwo/GalleryTwo'
export default {
  name: 'DetailComment',
  components: {
    GalleryTwo
  },
  props: {
    GalleryTwo: Array
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleGallery () {
      this.isShow = true
    },
    hangleHide () {
      this.isShow = false
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .hu
    color #00BCD4
    font-weight 600
.comment
 margin-top 0.2rem
 position relative
 h3
  padding 0 0.2rem
  height 0.88rem
  background #fff
  color #333
  font-size 0.3rem
  line-height 0.88rem
  text-indent 0.2rem
 .comment-list
  background #FFFFFF
  .mp-comment-item
   padding 0.1rem 0.2rem 0.3rem 0.2rem
   position relative
   img
    position absolute
    top 0.2rem
    right 0.2rem
    width 1.42rem
    height 0.96rem
   .comment-stardate
    margin-top 0.1rem
    line-height 0.6rem
    .mpf-starlevel
     vertical-align middle
     display inline-block
     position relative
     width 1.5rem
     height 0.28rem
     line-height 0.28rem
     font-size 0.28rem
     letter-spacing 0.02rem
     -webkit-transform scale(0.83)
     -moz-transform scale(0.83)
     -ms-transform scale(0.83)
     -o-transform scale(0.83)
     transform scale(0.83)
     -webkit-transform-origin 0 0
     -moz-transform-origin 0 0
     -ms-transform-origin 0 0
     -o-transform-origin 0 0
     transform-origin 0 0
     .starlevel-gain
      width 100%
      z-index 2
      color #ffb436
      position absolute
      top 0.04rem
      left 0
    .comment-date
     position relative
     float right
     top 0.16rem
     margin-left 0.2rem
     line-height 0.28rem
     font-size 0.24rem
     vertical-align middle
     color #212121
   .comment-content
    height auto
    overflow auto
    word-break break-all
    word-wrap break-word
    line-height 0.42rem
    font-size 0.26rem
    color #616161
   .comment-foldbtn
    height 0.48rem
    line-height 0.48rem
    text-align center
    font-size 0.26rem
    color #9e9e9e
   .mp-comment-imgs
    margin 0.2rem 0 0.1rem 0
    position relative
    zoom 1;
.comment-npl-list
 margin 0.2rem 0 0.1rem 0
 position relative
 ul
  height 4.6rem
  li
   width 30%
   float left
   margin 0.06rem -0.08rem
   margin-left 0.26rem
   img
    width 100%
 .mp-comment-imgnumtag
  position absolute
  bottom 0.8rem
  right 0rem
  .commenttag-bg
   position absolute
   display inline-block
   background #000
   opacity 0.5
   height 0.4rem
   width 0.94rem
   border-top-left-radius .2rem
   border-bottom-left-radius 0.2rem
   bottom 0.78rem
   right 0.22rem
   margin-bottom 0.6rem
  .comment-tagnum
   position absolute
   height 0.4rem
   width 0.94rem
   line-height 0.4rem
   font-size 0.24rem
   color #fff
   text-align right
   padding-right 0.05rem
   bottom 0.78rem
   right 0.22rem
   margin-bottom 0.6rem
 .mp-more-refresh
  position relative
  margin-top -.02rem
  height .8rem
  background #fff
  color #616161
  line-height .8rem
  text-align center
  z-index 99
</style>
